<template>
	<view :disabled="codeDisAbeld" @click="requestSendCode" class="btn-code"
		:class="{'btn-code-disable': codeDisAbeld}">{{codeText}}</view>
</template>

<script>
	export default {
		name: "zy-button-code",
		data() {
			return {
				codeDisAbeld: false,
				codeText: '获取验证码',
			};
		},
		props:{
			account:{
				type:String
			},
			smstype:{
				type: [String, Number],
				default: '1'
			},
		},
		methods: {
			async requestSendCode() {
				let param = {
					loginname: this.account,
					type: this.smstype
				};
				let res = await this.$common.post('/app/zhuce/sendCode', param)
				if (0 == res.code) {
					this.countdown();
					uni.showToast({
						title: '短信已发送',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			countdown() {
				let seconds = 60;
				this.codeDisAbeld = true;
				let timer = setInterval(() => {
					seconds--;
					this.codeText = seconds + 's';
					if (seconds === 0) {
						clearInterval(timer);
						this.codeText = '获取验证码';
						this.codeDisAbeld = false;
					}
				}, 1000);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.btn-code {
		background-image: linear-gradient(to right, #9fe9ff, #ab7aff);
		border-radius: 50rpx;
		width: 200rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: white;
		font-size: 24rpx;
		opacity: 1;
	}

	.btn-code-disable {
		opacity: 0.5;
	}
</style>